<template>
  <el-container style="height: 100vh;">
    <el-aside :width="sideWidth + 'px'" style=" background-color: rgb(238, 241, 246)">
      <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" :menus="menus"/>
    </el-aside>
    <el-container>
      <el-header style="font-size: 12px">
        <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :user="user"/>
      </el-header>
      <el-main>
<!--        表示当前页面子路由会在 <router-view/> 里面展示-->
        <router-view @refreshUser="getUser"/>
      </el-main>
      </el-container>
  </el-container>
</template>

<style>
.el-header {
  border-bottom: 1px solid #333;
}

.el-aside {
  color: #333;
}
</style>

<script>

import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";

export default {
  name: 'Manage',
  data() {
    return {
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) :{},
      menus: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")) :{}
    }
  },

  // 组件
  components: {
    Header,
    Aside
  },

  methods: {
    async getUser() {
      // 从后台获取数据
      this.request.get("/user/username/dto/" + this.user.username).then(res =>{
        if (res.code === '200'){
          this.user = res.data
          this.user.token = JSON.parse(localStorage.getItem("user")).token
          localStorage.setItem("user",JSON.stringify(this.user))
          localStorage.setItem("menus",JSON.stringify(res.data.menus))
        }
      })

    },
    collapse() { // 点击收缩按钮
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.collapseBtnClass = 'el-icon-s-unfold';
        this.sideWidth = 64;
        this.logoTextShow = false;
      } else { // 展开
        this.collapseBtnClass = 'el-icon-s-fold';
        this.sideWidth = 200;
        this.logoTextShow = true;
      }
    },

  }

}
</script>
